<template>
  <div class="singer-home">
    <!-- 导航栏 -->
    <van-nav-bar
      title="歌手信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 标签页 -->
    <van-tabs v-model="active">
      <van-tab title="百科">
        <SingerIntro :singeid='id'/>
      </van-tab>
      <van-tab title="歌曲">
        <SingerSong :singeid='id'/>
      </van-tab>
    </van-tabs> 
  </div>
</template>
<script>
// 引入两个标签页对应的子组件
import SingerIntro from "./components/SingerIntro.vue";
import SingerSong from "./components/SingerSong.vue";

export default {
   data() {
    return {
      //标签页的当前激活页，是标签页tab的默认用法
      active: 0,
      // 从HomeSinger.vue中跳转过来，通过路由获取到id，也就是歌手的id
      id: this.$route.params.id 
    };
  },
  methods: {
    onClickLeft() {
      //如果历史记录大于1，那么返回到上一层，如果历史记录小于等于1，返回到根路由
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
  },
  components: {
    SingerIntro,
    SingerSong
  },
};
</script>
<style scoped>
</style>